<template>
	<div class="statistical-other-case-container">
		<el-form :inline="true" :model="query" size="mini">
			<el-form-item label-width="100px" label="单位类型：">
				<el-radio-group v-model="query.organType">
					<el-radio-button :label="1">录入单位</el-radio-button>
					<el-radio-button :label="2">主办单位</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item label-width="100px" label="单位名称：">
				<el-cascader :options="organData" :props="elselectSingle" ref="refelOrgan" clearable placeholder="请选择..." />
			</el-form-item>
			<el-form-item label-width="100px" label="时间类型：">
				<el-radio-group v-model="query.cType">
					<el-radio-button :label="1">登记时间</el-radio-button>
					<el-radio-button :label="2">案发时间</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item label-width="100px" label="时间值：">
				<el-date-picker
					v-model="query.cTimeAll"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					type="daterange"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
				>
				</el-date-picker>
			</el-form-item>
			<el-form-item style="margin-left: 20px">
				<el-button type="primary" @click="statistics" icon="el-icon-search" size="small">查询</el-button>
				<el-button type="success" plain @click="onExportExcel" icon="el-icon-document" size="small">导出</el-button>
			</el-form-item>
		</el-form>
		<el-table
			id="tableExcel" border
			ref="singleTableRef"
			:data="tableData"
			:row-style="{ height: '40px' }"
			:cell-style="{ padding: '0' }"
			size="medium"
			show-summary
			:summary-method="getSummaries"
			style="width: 100%"
			highlight-current-row
			@current-change="handleCurrentChange"
		>
			<el-table-column align="center" label="序号" type="index" width="60" />
			<el-table-column align="center" property="organName" sortable prop="organName" label="单位名称" />
			<el-table-column align="center" label="案件数量" sortable property="caseCount" show-overflow-tooltip>
				<template #default="scope">
					<span style="cursor: pointer;" @click="view(scope.row.organId)">{{ `${scope.row.caseCount}` }}</span>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive , h , VNode} from 'vue';
import { getOrganTree, statisticsCase } from '/@/api/statistics/index';
import type { ElTable } from 'element-plus';
import { exportExcel } from '/@/common/excel';
import { useRouter } from 'vue-router';

export default {
	name: 'statisticalOtherCase',
	setup() {
		const elselectSingle = {
			checkStrictly: true,
		};
		const router = useRouter();
		const state = reactive({
			organData: [],
			selectTableData: [],
			query: {
				cType: 1,
				organType:1,
				cTimeStart: null,
				cTimeEnd: null,
				cTimeAll: null,
				currentOrganId: 0,
			},
			tableData: [],
		});

		const refelOrgan = ref();
		const currentRow = ref();
		const singleTableRef = ref<InstanceType<typeof ElTable>>();

		const setCurrent = (row?: User) => {
			singleTableRef.value!.setCurrentRow(row);
		};

		const handleCurrentChange = (val: User | undefined) => {
			currentRow.value = val;
		};

		async function init() {
			await getOrganTree(state.query).then((res: any) => {
				if (res.success) {
					state.organData = [res.data];
					statistics();
				}
			});
		}

		async function statistics() {
			state.query.currentOrganId = 0;
			if (refelOrgan.value.getCheckedNodes().length > 0) {
				state.query.currentOrganId = Number(refelOrgan.value.getCheckedNodes()[0].value);
			}

			state.query.cTimeStart = null;
			state.query.cTimeEnd = null;
			if (state.query.cTimeAll && state.query.cTimeAll.length > 1) {
				state.query.cTimeStart = state.query.cTimeAll[0];
				state.query.cTimeEnd = state.query.cTimeAll[1];
			}

			await statisticsCase(state.query).then((res: any) => {
				if (res.success) {
					state.tableData = res.data;
					if (state.tableData.length > 0) {
						setCurrent(state.tableData[0]);
					}
				}
			});
		}

		const onExportExcel = () => {
			exportExcel('tableExcel', '案件数量统计', '案件数量统计.xlsx');
		};
		const getSummaries = (param) => {
			const { columns, data } = param
			const sums: (string | VNode)[] = []
			columns.forEach((column, index) => {
				if (index === 1) {
					sums[index] = h('div', { style: { textDecoration: 'underline' } }, [
						'合计',
					])
					return
				}
				const values = data.map((item) => Number(item[column.property]))
				if (!values.every((value) => Number.isNaN(value))) {
					sums[index] = ` ${values.reduce((prev, curr) => {
						const value = Number(curr)
						if (!Number.isNaN(value)) {
						return prev + curr
						} else {
						return prev
						}
					}, 0)}`
				} else {
					sums[index] = ''
				}
			})
			return sums
		}
		function view(org){
			let queryParam = {
				orgType:state.query.organType + 1,
				organId: state.query.organType == 1?org:0,
				hostOrgan:state.query.organType == 1?0:org,
				rbegin:null,
				rend:null,
				tbegin:null,
				tend:null,
				a:new Date().getTime()
			};
			if(state.query.cTimeAll){
				if(state.query.cType == 1){
					if (state.query.cTimeAll.length > 1) {
						queryParam.rbegin = state.query.cTimeAll[0];
						queryParam.rend = state.query.cTimeAll[1];
					}
				}else{
					if (state.query.cTimeAll.length > 1) {
						queryParam.tbegin = state.query.cTimeAll[0];
						queryParam.tend = state.query.cTimeAll[1];
					}
				}
			}
			router.push({ 
				path: '/query/case',
				query: queryParam
			});
		}
		init();

		return {
			init,
			getSummaries,
			statistics,
			view,
			onExportExcel,
			elselectSingle,
			refelOrgan,
			setCurrent,
			currentRow,
			singleTableRef,
			handleCurrentChange,
			...toRefs(state),
		};
	},
};
</script>
